﻿<script type="text/template" id="basicfunction-template">
    <el-container class="page-container p20">
        <el-header height="auto">
            <div class="tools-box">
                <div class="tools-box-buttons">
                    @Exhort.Backstage.Components.WorkControls.PageButtons(this)
                </div>
            </div>
        </el-header>
        <el-main class="table-box">
            <el-table height="100%" ref="table" :data="rows" row-key="ID" v-on:row-click="clickRow" border>
                <el-table-column label="选择" width="60" align="center">
                    <template slot-scope="scope">
                        <el-radio class="table-row-radio" v-model="currentRow" :label="scope.row"><i /></el-radio>
                    </template>
                </el-table-column>
                <el-table-column prop="Sequence" label="排序" width="80" align="center"></el-table-column>
                <el-table-column prop="Icon" label="图标" width="80" align="center">
                    <template slot-scope="scope">
                        <i :class="scope.row.Icon"></i>
                    </template>
                </el-table-column>
                <el-table-column prop="Title" label="标题" width="120" align="center"></el-table-column>
                <el-table-column prop="Type" label="类型" width="80" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.Type=='power'">权限</span>
                        <span v-else-if="scope.row.Type=='button'">按钮</span>
                        <span v-else>未知</span>
                    </template>
                </el-table-column>
                <el-table-column prop="Value" label="内容" width="180" align="center"></el-table-column>
                <el-table-column prop="Attrs" label="扩展属性" width="220" align="center"></el-table-column>
                <el-table-column prop="Remark" label="描述"></el-table-column>
            </el-table>
        </el-main>
        <el-footer class="pagination-box" height="auto">
            <el-pagination :current-page.sync="currentPage" :page-size.sync="pageSize" :total="total" v-on:size-change="loadList" v-on:current-change="loadList" background></el-pagination>
        </el-footer>
        <el-dialog ref="dialog" :title="model.ID?'修改':'新增'" :visible.sync="dialogVisible" :close-on-click-modal="false" width="500px">
            <el-form ref="form" :rules="rules" :model="model" label-width="80px">
                <el-form-item prop="Title" label="功能标题">
                    <el-input v-model="model.Title"></el-input>
                </el-form-item>
                <el-form-item prop="Icon" label="功能图标">
                    <el-autocomplete ref="icon" v-model="model.Icon" :fetch-suggestions="getIcons" popper-class="page-select-icon" style="width:100%">
                        <template slot-scope="{item}">
                            <i :class="item.value"></i>
                        </template>
                        <template slot="prepend">
                            <i :class="model.Icon"></i>
                        </template>
                    </el-autocomplete>
                </el-form-item>
                <el-form-item prop="Type" label="功能类型">
                    <el-radio-group v-model="model.Type">
                        <el-radio label="power">权限</el-radio>
                        <el-radio label="button">按钮</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item prop="Value" label="功能键值">
                    <el-input v-model="model.Value"></el-input>
                </el-form-item>
                <el-form-item prop="Attrs" label="按钮属性">
                    <el-input v-model="model.Attrs"></el-input>
                </el-form-item>
                <el-form-item prop="Remark" label="功能描述">
                    <el-input v-model="model.Remark" :rows="3" type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button v-on:click="dialogVisible=false">关闭</el-button>
                <el-button type="primary" v-on:click="submitForm">确定</el-button>
            </div>
        </el-dialog>
    </el-container>
</script>
<script type="text/javascript">
    var basicfunction = {
        template: "#basicfunction-template",
        data: function () {
            return {
                listQuery: { page: 1, rows: 20 },
                rows: [],
                total: 0,
                currentRow: null,
                model: {
                    ID: "",
                    Title: "",
                    Icon: "",
                    Type: "power",
                    Value: "",
                    Attrs: "",
                    Remark: ""
                },
                rules: {
                    Title: [{ required: true, message: "请填写功能标题", trigger: "blur" }],
                    Value: [{ required: true, message: "请填写功能键值", trigger: "blur" }]
                },
                dialogVisible: false
            }
        },
        computed: {
            currentPage: {
                get() { return this.listQuery.page; },
                set(val) { this.listQuery.page = val; }
            },
            pageSize: {
                get() { return this.listQuery.rows; },
                set(val) { this.listQuery.rows = val; }
            }
        },
        methods: {
            loadList: function () {
                var that = this;
                workVue.ajax({
                    url: "/basic/function/grid",
                    data: that.listQuery,
                    target: that.$el,
                    success: function (result) {
                        that.rows = result.data.rows;
                        that.total = result.data.total;
                    }
                });
                that.currentRow = null;
            },
            clickRow: function (row) {
                this.currentRow = row;
            },
            resetModel: function () {
                this.model = {
                    ID: "",
                    Title: "",
                    Icon: "",
                    Type: "power",
                    Value: "",
                    Attrs: "",
                    Remark: ""
                };
            },
            insert: function () {
                var that = this;
                that.resetModel();
                that.$nextTick(function () {
                    that.$refs.form.clearValidate();
                    that.$refs.icon.handleChange = function () { };
                });
                that.dialogVisible = true;
            },
            update: function () {
                var that = this;
                if (that.currentRow) {
                    that.insert();
                    workVue.ajax({
                        url: "/basic/function/get",
                        data: { id: that.currentRow.ID },
                        target: that.$refs.dialog.$el,
                        success: function (result) {
                            that.model = result.data;
                        }
                    });
                }
                else { that.$message.warning("请选择操作行"); }
            },
            getIcons: function (query, callback) {
                var filter = function (icon) {
                    return icon.value.toLowerCase().indexOf(query.toLowerCase()) != -1;
                };
                callback(query ? iconCls.filter(filter) : iconCls);
            },
            submitForm: function () {
                var that = this;
                that.$refs.form.validate((valid) => {
                    if (valid) {
                        workVue.ajax({
                            url: "/basic/function/save",
                            type: "post",
                            data: { model: that.model },
                            target: that.$refs.dialog.$el,
                            success: function (result) {
                                that.loadList();
                                that.dialogVisible = false;
                                that.$message.success(result.message);
                            }
                        });
                    }
                });
            },
            remove: function () {
                var that = this;
                if (that.currentRow) {
                    that.$confirm("删除数据后将不可恢复，是否继续？", "提示", {
                        type: "warning"
                    }).then(() => {
                        workVue.ajax({
                            url: "/basic/function/remove",
                            type: "post",
                            data: { id: that.currentRow.ID },
                            target: that.$el,
                            success: function (result) {
                                that.loadList();
                                that.$message.success(result.message);
                            }
                        });
                    }).catch(() => { });
                }
                else { that.$message.warning("请选择操作行"); }
            },
            order: function (order) {
                var that = this;
                if (that.currentRow) {
                    workVue.ajax({
                        url: "/basic/function/setorder",
                        type: "post",
                        data: { id: that.currentRow.ID, order: order },
                        target: that.$el,
                        success: function (result) {
                            that.loadList();
                            that.$message.success(result.message);
                        }
                    });
                }
                else { that.$message.warning("请选择操作行"); }
            },
            reload: function () {
                this.loadList();
            }
        },
        mounted: function () {
            this.loadList();
        }
    }
</script>